import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import Counter from './containers/Counter';
import counter from './reducers';

// compose()使用了函数合成（Function Composition）的思想。
// 函数合成是函数式编程中的概念，它接受多个函数作为参数并返回一个新函数。
// 新函数按照传入的参数顺序，从右往左依次执行，前一个函数的返回值是后一个函数的输入值。
// 下面是函数合成的一个简单示例：
//
// const absAndRound=compose(Math.round, Math.abs)
// //compose写法等同于下面的函数嵌套
// const absAndRound=val=>Math.round(Math.abs(val))

const store = createStore(counter, compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
));
const rootEl = document.getElementById('root');

ReactDOM.render(
    <Provider store={store}>
        <Counter />
    </Provider>, rootEl);
